.enhanced-select {
  &__wrapper {
    border: 1px solid var(--color-hairline);
    font-family: 'Google Sans', sans-serif;
    height: 100%;
  }

  label {
    cursor: pointer;
    height: 100%;
    min-width: 80px;
    padding: 0 0.8em;

    svg {
      margin-left: 0.75rem;
      width: 0.625rem;
    }
  }

  &__options {
    background: get-color('white');
    bottom: 0;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    display: none;
    left: calc(50% - 0.75rem);
    list-style: none;
    margin: 0;
    max-height: 24.5rem;
    min-width: 18rem;
    overflow-y: auto;
    padding: 1.125rem 0;
    position: absolute;
    transform: translateY(100%);
    z-index: 10;

    &::-webkit-scrollbar-thumb {
      background: get-color('grey-200');
    }

    &::-webkit-scrollbar {
      width: 0.375rem;
    }

    li {
      border-radius: 0 100px 100px 0;
      color: get-color('grey-800');
      font-family: 'Google Sans', sans-serif;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.2rem;
      padding: 1rem 2.75rem;
      text-align: left;
    }

    li[selected] {
      background: get-color('grey-50');
      color: get-color('grey-400');
    }

    li:hover:not([selected]) {
      background: get-color('blue-50');
      color: get-color('blue-700');
    }

    li:first-child {
      margin-top: 0;
    }

    li:last-child {
      margin-bottom: 0;
    }
  }

  &__select {
    display: none;
  }
}

.enhanced-select[open] {
  .enhanced-select__options {
    display: block;
  }
}

.enhanced-select[multiple] {
  li[selected] svg {
    fill: get-color('grey-500');
    margin-right: calc(-2.75rem/2);
  }

  li[selected]:hover {
    color: get-color('grey-600');

    svg {
      fill: get-color('grey-600');
    }
  }
}

enhanced-select {
  align-items: center;
  display: none;
  height: 2.5rem;
  position: relative;

  &:defined {
    display: inline-flex;
  }

  select {
    max-height: 100%;
  }
}
